<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<u-navbar title="订单详情" :autoBack="true"></u-navbar>

		<!-- 订单状态 -->
		<view class="status-card" :class="'status-' + orderInfo.order_status">
			<view class="status-icon">
				<u-icon name="checkmark-circle" size="60" color="#ffffff"></u-icon>
			</view>
			<view class="status-info">
				<view class="status-title">{{getStatusText()}}</view>
				<view class="status-desc">{{getStatusDescription()}}</view>
			</view>
		</view>

		<!-- 订单进度 -->
		<view class="progress-card">
			<view class="progress-item"
				v-for="(item, index) in progressSteps"
				:key="index"
				:class="{'active': orderInfo.order_status >= index, 'current': orderInfo.order_status === index}">
				<view class="progress-dot"></view>
				<view class="progress-line" v-if="index < progressSteps.length - 1"></view>
				<view class="progress-text">{{item}}</view>
				<view class="progress-time" v-if="getProgressTime(index)">{{getProgressTime(index)}}</view>
			</view>
		</view>

		<!-- 收货地址 -->
		<view class="info-card" v-if="orderInfo.address">
			<view class="card-title">
				<u-icon name="map" size="32" color="#007aff"></u-icon>
				<text>收货地址</text>
			</view>
			<view class="address-info">
				<view class="address-header">
					<text class="name">{{orderInfo.address.name}}</text>
					<text class="phone">{{orderInfo.address.phone}}</text>
				</view>
				<view class="address-detail">
					<text>{{orderInfo.address.province}} {{orderInfo.address.city}} {{orderInfo.address.district}} {{orderInfo.address.address}}</text>
				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="info-card">
			<view class="card-title">
				<u-icon name="shopping-cart" size="32" color="#007aff"></u-icon>
				<text>商品信息</text>
			</view>
			<view class="product-item" v-for="(item, index) in orderInfo.products" :key="index">
				<image class="product-image" :src="item.thumbnail" mode="aspectFill"></image>
				<view class="product-info">
					<view class="product-name">{{item.name}}</view>
					<view class="product-price">
						<text v-if="item.payment_type === 0">¥{{item.price}}</text>
						<text v-else-if="item.payment_type === 1">{{item.points_price}}积分</text>
						<text v-else>¥{{item.price}} + {{item.points_price}}积分</text>
					</view>
				</view>
				<view class="product-quantity">x{{item.quantity}}</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="info-card">
			<view class="card-title">
				<u-icon name="file-text" size="32" color="#007aff"></u-icon>
				<text>订单信息</text>
			</view>
			<view class="order-info-item">
				<text class="info-label">订单编号</text>
				<text class="info-value">{{orderInfo.order_number}}</text>
			</view>
			<view class="order-info-item">
				<text class="info-label">创建时间</text>
				<text class="info-value">{{formatTime(orderInfo.order_time)}}</text>
			</view>
			<view class="order-info-item" v-if="orderInfo.payment_time">
				<text class="info-label">支付时间</text>
				<text class="info-value">{{formatTime(orderInfo.payment_time)}}</text>
			</view>
			<view class="order-info-item" v-if="orderInfo.shipping_time">
				<text class="info-label">发货时间</text>
				<text class="info-value">{{formatTime(orderInfo.shipping_time)}}</text>
			</view>
			<view class="order-info-item" v-if="orderInfo.complete_time">
				<text class="info-label">完成时间</text>
				<text class="info-value">{{formatTime(orderInfo.complete_time)}}</text>
			</view>
			<view class="order-info-item">
				<text class="info-label">支付方式</text>
				<text class="info-value">{{getPaymentTypeText()}}</text>
			</view>
			<view class="order-info-item" v-if="orderInfo.payment_method">
				<text class="info-label">支付渠道</text>
				<text class="info-value">{{getPaymentMethodText()}}</text>
			</view>
			<view class="order-info-item" v-if="orderInfo.remark">
				<text class="info-label">订单备注</text>
				<text class="info-value">{{orderInfo.remark}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNumber: '',
				orderInfo: {
					order_status: 0,
					products: [],
					address: {},
					total_price: 0,
					total_points: 0,
					shipping: 0,
					payment_type: 0
				},
				progressSteps: ['待付款', '待发货', '待收货', '已完成']
			}
		},
		computed: {
			// 是否显示底部操作栏
			showFooterActions() {
				return this.orderInfo.order_status !== 4; // 不是已取消状态
			}
		},
		onLoad(options) {
			if (options.order_number) {
				this.orderNumber = options.order_number;
				this.loadOrderInfo();
			} else {
				uni.showToast({
					title: '订单信息不存在',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			// 加载订单信息
			loadOrderInfo() {
				const orderList = uni.getStorageSync('officeShopOrders') || [];
				const order = orderList.find(item => item.order_number === this.orderNumber);

				if (order) {
					this.orderInfo = order;
				} else {
					uni.showToast({
						title: '订单信息不存在',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			},

			// 获取订单状态文本
			getStatusText() {
				const statusMap = {
					0: '等待付款',
					1: '等待发货',
					2: '等待收货',
					3: '交易完成',
					4: '交易关闭'
				};

				return statusMap[this.orderInfo.order_status] || '未知状态';
			},

			// 获取订单状态描述
			getStatusDescription() {
				const descMap = {
					0: '请在24小时内完成支付，否则订单将自动取消',
					1: '商家正在处理您的订单，请耐心等待',
					2: '商品已发出，请注意查收',
					3: '交易已完成，感谢您的购买',
					4: '订单已取消'
				};

				return descMap[this.orderInfo.order_status] || '';
			},

			// 获取进度时间
			getProgressTime(index) {
				if (index === 0 && this.orderInfo.order_time) {
					return this.formatTime(this.orderInfo.order_time);
				} else if (index === 1 && this.orderInfo.payment_time) {
					return this.formatTime(this.orderInfo.payment_time);
				} else if (index === 2 && this.orderInfo.shipping_time) {
					return this.formatTime(this.orderInfo.shipping_time);
				} else if (index === 3 && this.orderInfo.complete_time) {
					return this.formatTime(this.orderInfo.complete_time);
				}

				return '';
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '';

				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');

				return `${year}-${month}-${day} ${hour}:${minute}`;
			},

			// 获取支付方式文本
			getPaymentTypeText() {
				const typeMap = {
					0: '在线支付',
					1: '积分支付',
					2: '混合支付'
				};

				return typeMap[this.orderInfo.payment_type] || '未知方式';
			},

			// 获取支付渠道文本
			getPaymentMethodText() {
				const methodMap = {
					'wechat': '微信支付',
					'alipay': '支付宝',
					'balance': '余额支付',
					'points': '积分支付'
				};

				return methodMap[this.orderInfo.payment_method] || '未知渠道';
			},

			// 取消订单
			cancelOrder() {
				uni.showModal({
					title: '取消订单',
					content: '确定要取消该订单吗？',
					success: (res) => {
						if (res.confirm) {
							// 更新订单状态
							this.updateOrderStatus(4); // 4: 已取消

							uni.showToast({
								title: '订单已取消',
								icon: 'success'
							});

							// 重新加载订单信息
							this.loadOrderInfo();
						}
					}
				});
			},

			// 去支付
			goToPay() {
				uni.navigateTo({
					url: `/pages/order/payment?order_number=${this.orderNumber}`
				});
			},

			// 提醒发货
			remindShipping() {
				uni.showToast({
					title: '已提醒商家发货',
					icon: 'success'
				});
			},

			// 确认收货
			confirmReceive() {
				uni.showModal({
					title: '确认收货',
					content: '确认已收到商品吗？',
					success: (res) => {
						if (res.confirm) {
							// 更新订单状态
							this.updateOrderStatus(3); // 3: 已完成

							uni.showToast({
								title: '确认收货成功',
								icon: 'success'
							});

							// 重新加载订单信息
							this.loadOrderInfo();
						}
					}
				});
			},

			// 去评价
			goToComment() {
				uni.showToast({
					title: '评价功能开发中',
					icon: 'none'
				});
			},

			// 再次购买
			buyAgain() {
				// 将商品添加到购物车
				let cartList = uni.getStorageSync('officeShopCart') || [];

				this.orderInfo.products.forEach(item => {
					const cartItem = {
						id: item.id,
						name: item.name,
						thumbnail: item.thumbnail,
						price: item.price,
						points_price: item.points_price,
						quantity: item.quantity,
						payment_type: item.payment_type,
						selected: true,
						stock: item.stock
					};

					// 检查商品是否已在购物车中
					const existingIndex = cartList.findIndex(ci => ci.id === cartItem.id && ci.payment_type === cartItem.payment_type);

					if (existingIndex > -1) {
						// 更新数量
						cartList[existingIndex].quantity += cartItem.quantity;
					} else {
						// 添加新商品
						cartList.push(cartItem);
					}
				});

				// 保存购物车
				uni.setStorageSync('officeShopCart', cartList);

				// 跳转到购物车页面
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			},

			// 更新订单状态
			updateOrderStatus(status) {
				const orderList = uni.getStorageSync('officeShopOrders') || [];
				const orderIndex = orderList.findIndex(item => item.order_number === this.orderNumber);

				if (orderIndex > -1) {
					orderList[orderIndex].order_status = status;

					// 根据状态设置相应的时间
					if (status === 3) {
						orderList[orderIndex].complete_time = new Date().getTime();
					} else if (status === 4) {
						orderList[orderIndex].cancel_time = new Date().getTime();
					}

					// 保存更新后的订单列表
					uni.setStorageSync('officeShopOrders', orderList);
				}
			}
		}
	}
</script>

<style lang="scss">
.container {
	padding-bottom: 120rpx;
	background-color: #f5f7fa;
}

.status-card {
	display: flex;
	align-items: center;
	padding: 40rpx 30rpx;
	color: #ffffff;

	&.status-0 {
		background-color: #ff9500; // 待付款
	}

	&.status-1 {
		background-color: #007aff; // 待发货
	}

	&.status-2 {
		background-color: #4cd964; // 待收货
	}

	&.status-3 {
		background-color: #8e8e93; // 已完成
	}

	&.status-4 {
		background-color: #8e8e93; // 已取消
	}
}

.status-icon {
	margin-right: 30rpx;
}

.status-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.status-desc {
	font-size: 24rpx;
	opacity: 0.9;
}

.progress-card {
	background-color: #ffffff;
	padding: 30rpx;
	margin: 20rpx;
	border-radius: 12rpx;
	display: flex;
	justify-content: space-between;
	position: relative;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.progress-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	flex: 1;

	.progress-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #c8c9cc;
		margin-bottom: 20rpx;
		z-index: 1;
	}

	.progress-line {
		position: absolute;
		top: 10rpx;
		right: -50%;
		width: 100%;
		height: 2rpx;
		background-color: #c8c9cc;
		z-index: 0;
	}

	.progress-text {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.progress-time {
		font-size: 20rpx;
		color: #c8c9cc;
	}

	&.active {
		.progress-dot {
			background-color: #007aff;
		}

		.progress-line {
			background-color: #007aff;
		}

		.progress-text {
			color: #007aff;
		}

		.progress-time {
			color: #666;
		}
	}

	&.current {
		.progress-dot {
			width: 24rpx;
			height: 24rpx;
			border: 4rpx solid #007aff;
			background-color: #ffffff;
		}

		.progress-text {
			font-weight: bold;
		}
	}
}

.info-card {
	background-color: #ffffff;
	margin: 20rpx;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-title {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	border-bottom: 1px solid #f5f5f5;

	text {
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}
}

.address-info {
	padding: 20rpx 30rpx;
}

.address-header {
	display: flex;
	margin-bottom: 10rpx;
}

.name {
	font-weight: bold;
	margin-right: 20rpx;
}

.phone {
	color: #666;
}

.address-detail {
	color: #333;
	font-size: 28rpx;
}

.product-item {
	display: flex;
	padding: 20rpx 30rpx;
	border-bottom: 1px solid #f5f5f5;

	&:last-child {
		border-bottom: none;
	}
}

.product-image {
	width: 140rpx;
	height: 140rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.product-price {
	color: #ff5500;
	font-size: 28rpx;
}

.product-quantity {
	color: #999;
	font-size: 28rpx;
	padding-top: 50rpx;
}

.order-info-item {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	font-size: 28rpx;
	border-bottom: 1px solid #f5f5f5;

	&:last-child {
		border-bottom: none;
	}

	&.total {
		font-weight: bold;
	}
}

.info-label {
	color: #666;
}

.info-value {
	color: #333;

	&.price {
		color: #ff5500;
	}

	&.points {
		color: #ff9500;
	}
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
}

.footer-button {
	padding: 15rpx 30rpx;
	border-radius: 30rpx;
	font-size: 28rpx;
	margin-left: 20rpx;

	&.normal {
		background-color: #f5f5f5;
		color: #666;
	}

	&.primary {
		background-color: #007aff;
		color: #ffffff;
	}

	&.cancel {
		border: 1px solid #999;
		color: #666;
	}
}
</style>
